<script lang="ts" setup>
import { useFoodStore } from '@/stores/counter'

// #region 引入包, 函数和组件
import { ref, watch } from 'vue'
// #endregion

// #region // 使用模块(仓库、路由、父组件参数函数)
const foodStore = useFoodStore()
// #endregion

// #region // 变量
const curTabIndex = ref<number>(0) // 当前选中的tab下标
const indexChnage = ref(false) // 下标变化
// #endregion

// #region // 函数

// #endregion

// #region // 生命周期和vue函数
watch(curTabIndex, (newVal: number, oldVal: number) => {
  // console.log(newVal, oldVal)
  indexChnage.value =
    newVal - oldVal > 0
      ? false // 往右走
      : true // 往左走
})
// #endregion
</script>

<template>
  <div class="evaluation">
    <header>
      <router-link to="/home">&lt;</router-link>
      <h3>食物健康测评</h3>
    </header>
    <head-controls></head-controls>
    <aside>
      <p
        v-for="(item, index) in foodStore.evaluationData"
        :key="item.title"
        @click="curTabIndex = index"
        :class="{ active: curTabIndex === index }"
      >
        <span
          :style="{
            color: curTabIndex === index ? foodStore.evaluationData[curTabIndex].color : '',
          }"
          >{{ item.list.length }}</span
        >
        <span
          :style="{
            color: curTabIndex === index ? foodStore.evaluationData[curTabIndex].color : '',
          }"
          >{{ item.title }}</span
        >
      </p>
    </aside>
    <p :style="{ color: foodStore.evaluationData[curTabIndex].color }">
      {{ foodStore.evaluationData[curTabIndex].des }}
    </p>
    <transition name="item" mode="out-in">
      <transition-group
        v-if="foodStore.evaluationData[curTabIndex].list.length"
        tag="article"
        mode="out-in"
        enter-active-class="item-enter-active"
        :enter-from-class="indexChnage ? 'item-enter-from-right' : 'item-enter-from-left'"
      >
        <div
          class="item"
          v-for="item in foodStore.evaluationData[curTabIndex].list"
          :key="item.name + foodStore.evaluationData[curTabIndex].title"
          @click="$router.push({ name: 'detail', query: { name: item.name } })"
        >
          <h3>
            <img :src="item.imgUrl" />
            <span>{{ item.name }}</span>
            <span>升糖指数: {{ item.glycemicIndex }}</span>
          </h3>
          <p><span>{{ item.content.substr(0, 2) }}</span>{{ item.content.slice(2) }}</p>
        </div>
      </transition-group>
      <article class="empty" v-else>暂无数据</article>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.evaluation {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    height: 50rem;
    line-height: 50rem;
    color: var(--c-b);
    padding-left: 10rem;
    display: flex;
    a {
      font-size: 24rem;
      margin-right: 10rem;
      transform: scale(0.8, 1.4);
      color: var(--c-b);
    }
    h3 {
      font-size: 24rem;
    }
  }
  aside {
    height: 80rem;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    font-size: 18rem;
    border-bottom: 1rem solid #e1e1e1;
    span {
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: var(--c-w);
    }
    .active span {
      color: var(--c-b);
      font-weight: 560;
    }
  }
  > p {
    text-align: center;
    height: 40rem;
    line-height: 40rem;
    background: linear-gradient(#f3f3f3, #ccc 50%, #f4f4f4);
    box-shadow:
      inset 0 -3rem 5rem rgba($color: #000000, $alpha: 0.2),
      inset 0 1rem 3rem rgba($color: #000000, $alpha: 0.1);
  }
  article {
    background: #f4f4f4;
    padding: 10rem;
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    .item {
      background: linear-gradient(
        #eee 0,
        #eee 1%,
        #fff 1%,
        #fafafa 10%,
        #f4f4f4 50%,
        #e3e3e3 99%,
        #eee 99%,
        #f1f1f1 100%
      );
      margin-bottom: 20rem;
      border-radius: 4rem;
      box-shadow: 3rem 3rem 10rem rgba($color: #000000, $alpha: 0.3);
      padding: 10rem;
      h3 {
        display: flex;
        align-items: center;
        margin-bottom: 10rem;
        img {
          width: 30rem;
          height: 30rem;
          object-fit: cover;
          border-radius: 3rem;
          margin-right: 10rem;
        }
        span {
          font-weight: 560;
        }
        span:last-child {
          margin-left: auto;
        }
      }
      p {
        padding: 0 10rem;
        text-indent: 1em;
        span {
          font-size: 18rem;
        }
      }
    }
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rem;
    color: var(--c-w);
  }
}
.item-enter-active {
  transition:
    transform 0.4s ease,
    opacity 0.8s ease;
}
.item-enter-from {
  opacity: 0;
  transform: translateX(10rem);
}
.item-enter-from-left {
  opacity: 0;
  transform: translateX(-100%);
}
.item-enter-from-right {
  opacity: 0;
  transform: translateX(100%);
}
</style>
